<template>
  <uni-popup ref="popup" type="center" :mask-click="false">
    <view class="form-popup-container">
      <view class="popup-card">
        <!-- 关闭按钮 -->
        <view class="close-btn" @click="close">
          <uni-icons type="closeempty" size="24" color="#8f9bb3"></uni-icons>
        </view>

        <!-- 弹窗头部 -->
        <view class="popup-header">
          <text class="popup-title">{{ title }}</text>
          <text v-if="subtitle" class="popup-subtitle">{{ subtitle }}</text>
        </view>

        <!-- 表单内容区域 -->
        <view class="form-section">
          <slot name="form"></slot>
        </view>

        <!-- 操作按钮 -->
        <view class="popup-actions">
          <view class="cancel-button" @click="close">
            <text class="button-text">取消</text>
          </view>
          <view
            class="primary-button"
            :class="{ 'primary-button--loading': loading }"
            @click="emit('confirm')"
          >
            <text class="button-text">
              {{ loading ? loadingText : confirmText }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { ref } from "vue";

// Props
interface Props {
  title: string;
  subtitle?: string;
  confirmText?: string;
  loadingText?: string;
  loading?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  subtitle: "",
  confirmText: "确认",
  loadingText: "处理中...",
  loading: false,
});

// Emits
const emit = defineEmits<{
  confirm: [];
  close: [];
}>();

// 弹窗引用
const popup = ref();

// 打开弹窗
const open = () => {
  popup.value?.open();
};

// 关闭弹窗
const close = () => {
  popup.value?.close();
  emit("close");
};

// 暴露方法
defineExpose({
  open,
  close,
});
</script>

<style lang="scss" scoped>
.form-popup-container {
  width: 640rpx;
  max-width: 90vw;

  .popup-card {
    background: #ffffff;
    border-radius: 32rpx;
    overflow: visible;
    position: relative;

    .close-btn {
      position: absolute;
      top: 16rpx;
      right: 16rpx;
      width: 44rpx;
      height: 44rpx;
      border-radius: 22rpx;
      background: #f7f8fa;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.95);
        background: #e4e7ed;
      }
    }

    .popup-header {
      text-align: center;
      padding: 32rpx 40rpx 20rpx;

      .popup-title {
        display: block;
        font-size: 32rpx;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 8rpx;
      }

      .popup-subtitle {
        display: block;
        font-size: 24rpx;
        color: #8f9bb3;
        line-height: 1.4;
      }
    }

    .form-section {
      padding: 0 20rpx 16rpx;
      max-height: 60vh;
      overflow-y: auto;
    }

    .popup-actions {
      padding: 16rpx 40rpx 32rpx;
      display: flex;
      gap: 20rpx;

      .cancel-button {
        flex: 1;
        height: 80rpx;
        background: #f7f8fa;
        border: 2rpx solid #e4e7ed;
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;

        &:active {
          transform: scale(0.98);
          background: #e4e7ed;
        }

        .button-text {
          font-size: 28rpx;
          color: #606266;
          font-weight: 500;
        }
      }

      .primary-button {
        flex: 1;
        height: 80rpx;
        background: linear-gradient(135deg, #3c9cff, #2979ff);
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4rpx 16rpx rgba(60, 156, 255, 0.3);
        transition: all 0.3s ease;

        &:active {
          transform: scale(0.98);
        }

        .button-text {
          font-size: 28rpx;
          color: #ffffff;
          font-weight: 600;
        }

        &.primary-button--loading {
          background: #c8c9cc;
          box-shadow: none;

          .button-text {
            color: #ffffff;
          }
        }
      }
    }
  }
}

@keyframes buttonShine {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}
</style>
